<script setup lang="ts">
import {reqUserLogin,getUserInfo} from "@/api/auth/login.ts"
import logo from "@/assets/dashboard/logo.png"
import {reactive} from "vue";
import router from "@/router";
import {setToken} from "@/utils/auth.ts";
import {ElMessage} from "element-plus";
import {createHashWithFixedSalt} from "@/utils/HashFixedSalt.ts";

const form = reactive({
  account : '',
  ps : ''
})

const logoImage = logo
const UserLogin = () =>{
  // SHA256加密密码
  const ps = createHashWithFixedSalt(form.ps).hashedPassword
  reqUserLogin({account:form.account,ps:ps}).then(res=>{
    if (res.data.code === 200){
      setToken(res['data']['data']['tokenName'],res['data']['data']['tokenValue'])
      getUserInfo().then(res=>{
        setToken("UserInfo",JSON.stringify(res['data']['data']))
      })
      router.push('/fileList')
    }
  }).catch(()=>{
    ElMessage.error("请检查用户名密码是否合适")
  })
}
</script>

<template>
  <div class="bg">
    <div class="login-container">
      <div class="content-title">
        <el-image :src="logoImage"/>
        <span class="title">文件管理系统</span>
      </div>

      <div class="login-card">
        <el-form >
          <el-form-item :model="form">
            <el-input size="large" clearable v-model="form.account" placeholder="请输入用户名">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input size="large" type="password" v-model="form.ps" placeholder="请输入密码"  show-password>

            </el-input>
          </el-form-item>
          <el-form-item >
            <el-button class="sub-btn" type="primary" @click="UserLogin">进入系统</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>


</template>
<style lang="scss" scoped>
    .bg{
      &::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
        background: url("@/assets/login/bg3.png");
        background-size: cover;
      }
      .login-container{
        position: absolute;
        left:  150px;
        top: calc(50% - 200px);


        .content-title{
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 38px;
          line-height: 40px;
          font-weight: bold;
          margin-bottom: 80px;

          .title{
            margin-left: 10px;

          }
        }


        .login-card {
          width: 600px;
          height: 180px;
          margin: auto;
          padding: 20px;
          border-radius: 10px;
          background-color: #ffffff;
          box-shadow: 6px 6px 10px #d9ecff;
          backdrop-filter: blur(10px);

          .sub-btn{
            font-size: 16px;
            width: 100%;
            height: 40px;
            background: linear-gradient(to bottom right, #4970ff, #869aef);
          }

        }
      }
    }



</style>
